<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.1 实现栅格系统--基础部分</title>
    <style>
        * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }

            img {
                width: 100%;
            }

            body {
                padding-top: 100px;
            }

            [class*='col-'] {
                padding-top: 10px;
                padding-bottom: 10px;
                background-color: rgba(86, 61, 124, 0.15);
                border: 1px solid rgba(86, 61, 124, 0.2);
            }

            .row {
                margin-bottom: 20px;
            }

            .container {
                height: 500px;
                background-color: #eee;
            }
    </style>
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">1</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">2</div>

            
                <!-- <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"><img src="img/2-1.jpg" alt="phone"></div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"><img src="img/2-2.jpg" alt="phone"></div> -->
            

            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">3</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">4</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">5</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">6</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">7</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">8</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">9</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">10</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">11</div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">12</div>
        </div>

        <div class="row">
            <div class="col-3">
                <div class="row">
                    <div class="col-4">1-1</div>
                    <div class="col-4">1-2</div>
                    <div class="col-4">1-3</div>
                </div>
            </div>
            <div class="col-3">2</div>
            <div class="col-3">3</div>
            <div class="col-3">4</div>
        </div>
    </div>
</body>
</html>